:root {
    --primary-bg: linear-gradient(45deg, #0d364c, #062535, #02141e);
    --primary-color: #30ff05;
    --button-bg: #007bff;
    --button-hover-bg: #0056b3;
    --text-color: white;
}

body {
    display: grid;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--primary-bg);
    font-family: Arial, sans-serif;
    font-size: 1.2em;
}

/* Centrage du message noEME */
#noEME {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: red;
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.5em;
}

#noEME img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Masquer les éléments */
.hidden {
    display: none;
}

/* Styles pour le groupe PSSH, Licence et MPD */
.field {
    margin-bottom: 5px;
}

.label {
    margin-bottom: 5px;
    display: block;
	color: var(--primary-color);
}

.fas {
    color: white; /* Couleur blanche pour l'icône */
}

.disabled-icon {
    color: #999; /* Couleur grise pour l'icône désactivée */
    pointer-events: none; /* Désactiver l'interaction avec l'icône */
}

.input-container {
    display: flex;
    align-items: center;
    position: relative;
}

input[type="text"] {
    flex: 1; /* Permet au champ de texte de prendre l'espace disponible */
    padding: 10px 40px 10px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: black;
    color: #fff;
    font-size: 1.0em;
    box-sizing: border-box;
    height: 30px;
}

select {
    width: 50%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: black;
    color: #ffe300;
    font-size: 1.0em;
    box-sizing: border-box;
    height: 35px;
}

/* Styles pour plus-button */
.plus-button {
    position: absolute; /* Positionné à l'intérieur de l'input */
    right: 0px; /* Distance du bord droit */
    top: 0%; /* Distance du haut */
    background: var(--button-bg); /* Couleur de fond */
    padding: 8px 12px; /* Padding pour le bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    color: white; /* Couleur du texte */
    cursor: pointer; /* Changer le curseur au survol */
    transition: background 0.3s, transform 0.2s; /* Effets de transition */
    display: flex; /* Flexbox pour centrer le contenu */
    align-items: center; /* Centrer verticalement */
    justify-content: center; /* Centrer horizontalement */
    height: 100%; /* Hauteur complète du champ d'entrée */
    margin-left: 5px; /* Espace entre l'input et le bouton */
}

.plus-button:hover {
    background: var(--button-hover-bg); /* Couleur de fond au survol */
    transform: scale(1.05); /* Légèrement agrandir au survol */
}

/* Styles pour plus-button2 */
.plus-button2 {
    padding: 8px 12px; /* Padding pour le bouton */
    background: var(--button-bg); /* Couleur de fond */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    color: white; /* Couleur du texte */
    cursor: pointer; /* Changer le curseur au survol */
    transition: background 0.3s, transform 0.2s; /* Effets de transition */
    height: 35px; /* Hauteur correspondant au select */
    width: 50%;
}

/* Effet au survol pour plus-button2 */
.plus-button2:hover {
    background: var(--button-hover-bg); /* Couleur de fond au survol */
    transform: scale(1.05); /* Légèrement agrandir au survol */
}

/* Styles pour le bouton Download */
.plus-button3 {
    background: var(--button-bg); /* Couleur de fond */
    padding: 8px 12px; /* Padding pour le bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    color: white; /* Couleur du texte */
    cursor: pointer; /* Changer le curseur au survol */
    transition: background 0.3s, transform 0.2s; /* Effets de transition */
    margin-top: 5px; /* Espace au-dessus du bouton */
}

.plus-button3:hover {
    background: var(--button-hover-bg); /* Couleur de fond au survol */
    transform: scale(1.05); /* Légèrement agrandir au survol */
}

.plus-button:disabled, 
.plus-button2:disabled, 
.plus-button3:disabled,
.copy-button:disabled {
  background: #AAAAAA;
  color: #555;
  cursor: not-allowed;
}

/* Formulaire */
#wvForm {
    display: grid;
    gap: 5px; /* Espace minimum entre les éléments du formulaire */
    padding: 20px;
}

#wvForm label {
    font-size: 1.2em; /* Ajuster la taille si nécessaire */
    margin-bottom: 2px; /* Réduire l'espace en dessous des labels */
}

/* Zone de résultat */
#result, 
#ckResult {
    width: 100%;
    overflow-y: scroll; /* Scroll uniquement vertical */
    overflow-x: hidden; /* Pas de scroll horizontal */
    resize: none; /* Pas de redimensionnement de la zone */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background: black;
    color: #00b7ff; /* Couleur du texte des résultats */
    font-size: 1.1em; /* Augmenter la taille de la police pour la zone de résultat */
}

.textarea-container {
    position: relative; /* Positionnement relatif pour le bouton */
    width: 100%; /* Largeur du conteneur */
    height: 200px; /* Ajustez selon vos besoins */
}

textarea {
    width: 100%; /* Assurez-vous que le textarea prend toute la largeur */
    height: 100%; /* Hauteur du textarea */
    box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur totale */
    padding: 10px; /* Espace intérieur */
}

.copy-button {
    position: absolute; /* Positionnement absolu par rapport au conteneur */
    bottom: 1px; /* Distance du bas */
    right: 2px; /* Distance de la droite */
    background: var(--button-bg); /* Couleur de fond */
    padding: 5px 10px; /* Padding pour le bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    color: white; /* Couleur du texte */
    cursor: pointer; /* Changer le curseur au survol */
    transition: background 0.3s, transform 0.2s; /* Effets de transition */
}

.copy-button:hover {
    background: var(--button-hover-bg); /* Couleur de fond au survol */
    transform: scale(1.05); /* Légèrement agrandir au survol */
}

/* Choix de l'élément */
#chooserContainer {
    color: white;
}

#chooserSearch {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #000;
    font-size: 1.2em; /* Augmenter la taille de la police pour le champ de recherche */
}

/* Styles spécifiques à ckHome */
#ckHome h3, 
label {
    color: white;
    font-size: 1.4em; /* Augmenter la taille de la police pour le titre */
}

#ckHome label {
    align-self: end;
}

/* Style pour les éléments de liste */
#items {
    text-align: center; /* Aligne le texte à gauche */
    list-style-type: none; /* Supprime les puces si nécessaire */
    padding: 0; /* Supprime le padding par défaut */
}

#items li {
    padding: 5px;
    color: yellow;
    margin: 5px 0;
    border-radius: 5px;
    font-size: 0.8em; /* Taille de la police pour les éléments de liste */
}

/* Styles supplémentaires pour l'élément de liste */
#items li:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Couleur de fond lors du survol */
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
}

/* Notification de mise à jour */
#updateNotice {
    justify-self: center;
    align-self: end;
    color: white;
}

#updateNotice a {
    color: aqua;
    text-decoration: underline;
}

/* Styles pour le conteneur du schéma et du bouton */
.scheme-container {
    display: flex; /* Utiliser flexbox pour aligner le schéma et le bouton */
    align-items: center; /* Centrer les éléments verticalement */
    justify-content: space-between; /* Espacer les éléments */
    width: 90%; /* Largeur du conteneur */
    gap: 10px; /* Espacement entre le select et le bouton */
    margin-bottom: 20px; /* Espace en bas du conteneur */
}

.scheme-container select {
    flex: 1; /* Permet au select de prendre l'espace disponible */
}

/* Media Queries pour la réactivité */
@media (max-width: 768px) {
    input[type="text"], 
    select, 
    textarea {
        padding: 8px; /* Prendre toute la largeur sur petits écrans */
    }

    .plus-button, 
    .plus-button2, 
    .plus-button3 {
        width: 100%; /* Largeur complète sur petits écrans */
        margin: 5px 0; /* Marge pour l'espacement */
    }
}